<template>
  <a-form :form="form" class="form">
    <a-form-item
      label="categoryId"
      v-show="false"
    >
      <a-input
        v-decorator="['categoryId']"
      />
    </a-form-item>
    <a-form-item label="名称">
      <a-input
        placeholder="请输入名称"
        v-decorator="[
          'name',
          {rules: [{ required: true, message: '请输入名称', whitespace: true}]}
        ]"/>
    </a-form-item>
    <a-form-item label="别名">
      <a-input
        placeholder="请输入别名"
        v-decorator="[
          'nickName',
          {rules: [{ required: true, message: '请输入名称', whitespace: true}]}
        ]"/>
    </a-form-item>
    <a-form-item
      label="上级目录"
    >
      <a-tree-select
        showSearch
        placeholder="选择上级目录"
        allowClear
        :treeData="treeData"
        treeDefaultExpandAll
        treeNodeFilterProp="title"
        v-decorator="['parentId', {rules: [{required: true, message: '请选择上级目录'}]}]"
      />
    </a-form-item>
    <a-form-item label="描述">
      <a-textarea
        placeholder="请输入描述"
        :rows="4"
        v-decorator="['description',
                      {rules: [{ required: true, message: '请输入描述', whitespace: true}]}
        ]"></a-textarea>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" style="margin-left: 1%" @click="handleOk">保存</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import pick from 'lodash.pick'
import { getObj, save, update, fetchTree } from '@/api/cms/cmsCategory'
import { treeDataTranslate } from '@/utils/util'
export default {
  name: 'CategoryAdd',
  components: {
  },
  data () {
    return {
      form: this.$form.createForm(this),
      treeData: [],
      type: 'add'
    }
  },
  mounted () {
    fetchTree().then(res => {
      this.treeData = treeDataTranslate(res.data, 'categoryId', 'name')
    })
  },
  methods: {
    edit (id, type) {
      this.type = type
      const { form: { setFieldsValue, resetFields } } = this
      if (['edit'].includes(type)) {
        this.confirmLoading = true
        getObj(id).then(res => {
          const record = res.data
          this.confirmLoading = false
          this.$nextTick(() => {
            setFieldsValue(pick(record, ['categoryId', 'name', 'nickName', 'description', 'parentId']))
          })
        })
      } else {
        resetFields()
      }
    },
    handleOk () {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.confirmLoading = true
          try {
            if (this.type === 'add') {
              await save(values)
              this.clear()
              this.$emit('parentFn1')
            } else if (this.type === 'edit') {
              await update(values)
              this.clear()
              this.$emit('parentFn1')
            }
            setTimeout(() => {
              this.confirmLoading = false
              this.$emit('ok')
            }, 1500)
          } catch (e) {
            this.confirmLoading = false
            this.$message.error(e.msg)
          }
        }
      })
    },
    clear () {
      fetchTree().then(res => {
        this.treeData = treeDataTranslate(res.data, 'categoryId', 'name')
      })
      this.edit('', 'add')
    }
  }
}
</script>

<style scoped>

</style>
